
<template>
  <div class="rejectExchanges" style="height: calc(100vh - 45px);overflow: hidden;display: flex;justify-content: space-between;flex-direction: column;">
    <div style="height: 1px;background: #EFEFEF;width:100%;"></div>
    <div class="h100 oy" >
      <div style="line-height: 43rpx " class="fz30 pl30 pt30 pb30 pr30  bfff">为了更好的维护您的权益，请您选择拒收退货的理 由，以便平台更好的为你服务</div>
      <div style="line-height: 41rpx" class="fz28 pl30 pt20 pb20 pr30 mt20 bfff">您遇到了什么问题 </div>
      <div style="height: 1px;background: #EFEFEF;width:100%"></div>
      <div class="bfff ">
        <uv-radio-group borderBottom labelColor="#333" activeColor="#DE0012" placement="column" v-model="form.delivery_id">
          <uv-radio v-for="(item1, index1) in [{title: '商品已使用/拆封影响二次销售'},  {title: '商品包装破损/严重挤压'},{title: '商品存在非商家原因导致的质量问题'} ,
              {title: '商品与发货不符'},  {title: '退回商品非本店出售'},{title: '缺少配件/附件'} ,{title: '收到空包'} 
              ]" :label="item1.title" :key="index1" :name="item1.title">
            <div class="pt20 pl10 pb20 fz28">{{ item1.title }}</div>
          </uv-radio>
        </uv-radio-group>
      </div>
      <div class="mt20 pt20 pl30 pr30 bfff f aic jcsb">
        <div style="color: #595757">留言说明</div>
        <div>
          <div class="dib" style="color: #595757">0</div>
          <div class="dib" style="color: #9FA0A0">/500</div>
        </div>
      </div>
      <uv-textarea :customStyle="{padding: '30rpx'}" :textStyle="{fontSize: '28rpx', color: '#333', paddingLeft: '0'}" v-model="value" border="none" placeholderStyle="color:#C9CACA;font-size:28rpx" placeholder="您添加的留言对买家和客服可见"></uv-textarea>
      <div style="color: #595757" class="mt20 pt20 pl30 pr30 bfff f aic jcsb">上传凭证</div>
      <div class=" pl30 pr30 pb30 pt30 bfff ">
        <div class="p1758334646">
          <div class="mr20">
            <uv-upload @delete="deletePic" @afterRead="afterRead" :fileList="addressForm.video_link" name="video_link" :maxCount="8">
              <div class="p1758273490 bfff">
                <uv-icon size="60rpx" color="#595757" name="camera"></uv-icon>
                <div class="fz24" style="color: #595757">上传图片</div>
              </div>
            </uv-upload>
          </div>
          <div>
            <uv-upload @delete="deletePic" @afterRead="afterRead" :fileList="addressForm.video_links" name="video_links" :maxCount="2">
              <div class="p1758273490 bfff">
                <uv-icon size="60rpx" color="#595757" name="camera"></uv-icon>
                <div class="fz24" style="color: #595757">上传视频</div>
              </div>
            </uv-upload>
          </div>
        </div>
        <div style="color: #C9CACA" class="fz28">图片最多8张,视频最多2个</div>
      </div>
    </div>
    <button-lst bgColor="" text="确认" @submit="submitTap"></button-lst>
  </div>
</template>
<script>

import commonButtonVue from "../components/commonButton.vue";
import { uploadImage, videoUpload } from '@/api'
import { category, addGoods, detailGoods, merchantProfileedit } from "@/api/merchant.js";
import pageMixin from "../mixin/page.js";
export default {
  components: {
       "button-lst": commonButtonVue,

  },
  data() {
    return {
      routeQuery: {},
      form: {},
      addressForm: {
        tel: null,
        video_links: [{ url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },],
        address: '',
        video_link: [
          { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
          { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
          // { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
          // { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
          // { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
          // { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
          // { url: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0917/7f354202509171759163820.png' },
        ]
      },

      rules: {
        'provinceCityArea': { type: 'string', required: true, message: '请选择地区', trigger: ['blur', 'change'] },
        'address': { type: 'string', required: true, message: '请填写详细地址', trigger: ['blur', 'change'] },
        'name': { type: 'string', required: true, message: '请填写收件人', trigger: ['blur', 'change'] },
        'tel': {
          type: 'string', required: true, message: '电话号码格式错误', trigger: ['blur'],
          validator: (rule, value, callback) => {
            return uni.$uv.test.mobile(value)
          }

        },
      },
      dpdzPopupForm: {}
    }
  },

  onLoad(options) {
    if (options) this.routeQuery = options
  },
  methods: {
    afterRead(file) {
      uni.showLoading({ title: '上传中', mask: true })
      if (file.name == 'video_link') {
        videoUpload({ name: 'file', filePath: file.file.url }).then(res => {
          uni.hideLoading()
          if (res.code === 0) {
            this.$set(this.addressForm, file.name, [{ url: res.data.url }])
          }
        })
      } else {
        uploadImage({ name: 'file', filePath: file.file.thumb }).then(res => {
          uni.hideLoading()
          if (res.code === 0) {
            if (file.name == 'images' || file.name == 'details') {
              this.$set(this.addressForm, file.name, this.addressForm[file.name].concat([{ url: res.data }]))
            } else {
              this.$set(this.addressForm, file.name, [{ url: res.data }])
            }
          }
        })
      }

    },
    deletePic(file) {
      if (file.name == 'images' || file.name == 'details') {
        this.addressForm[file.name].splice(file.index, 1)
      } else {
        this.$set(this.addressForm, file.name, [])
      }
    },
    submitTap() {
      this.$refs.addressForm.validate().then(() => {
        let form = JSON.parse(JSON.stringify(this.addressForm))
        if (!form.area) return uni.$uv.toast('请选择省市区')
        form.province = form.province
        form.area = form.area
        form.city = form.city
        delete form.provinceCityArea
        delete form.district
        uni.showLoading({ title: '加载中', mask: true })
        if (this.routeQuery.id) {
          returnAddressEdit(form).then(res => {
            if (res.code === 200) {
              uni.hideLoading()
              uni.$uv.toast('编辑成功')
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 500);
            }
          })
        } else {
          returnAddressAdd(form).then(res => {
            if (res.code === 200) {
              uni.hideLoading()
              uni.$uv.toast('添加成功')
              setTimeout(() => {
                uni.navigateBack({ delta: 1 });
              }, 500);
            }
          })
        }
      })
    },

    initPage() {


    }
  }

}
</script>

<style lang="scss" scoped>
page {
  background-color: #f7f8f8;
  font-size: 28rpx;
  color: #333;
}

@import "../common.scss";
::v-deep .rejectExchanges .uv-radio {
  align-items: first baseline !important;
  padding-left: 30rpx !important;
  padding-bottom: 0 !important;
}

::v-deep .rejectExchanges .uv-border-bottom {
  border-color: #efefef !important;
}
::v-deep .rejectExchanges .uv-radio.uv-border-bottom:last-child {
  border: none !important;
}

::v-deep .rejectExchanges .uv-upload__wrap__preview {
  width: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  min-width: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  max-width: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  height: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  overflow: hidden !important;
  border-radius: 10rpx !important;
  border: 1rpx solid #f1f3f3 !important;
  box-sizing: border-box !important;
  flex: 1 !important;
  margin: 0 25rpx 20rpx 0 !important;
}

::v-deep .rejectExchanges .uv-upload__wrap__preview:nth-child(4n) {
  margin: 0 0 20rpx 0 !important;
}
::v-deep .rejectExchanges .uv-upload__wrap__preview__other,
::v-deep .rejectExchanges .uv-upload__wrap__preview__image {
  width: 100% !important;
  min-width: 100% !important;
}
::v-deep .rejectExchanges .uv-upload .uv-upload__deletable {
  width: 40rpx !important;
  height: 40rpx !important;
}
::v-deep .rejectExchanges .uv-upload .uv-icon__icon.uvicon.uvicon-close {
  font-size: 30rpx !important;
  top: 5rpx !important;
}
.p1758273490 {
  width: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  min-width: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  max-width: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  height: calc(((100vw - 60rpx) / 4) - 20rpx) !important;
  border-radius: 10rpx;
  border: 1rpx solid #c9caca;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}
.p1758334646 {
  display: flex;
  flex-wrap: wrap;
}
</style>